<template>
  <div>
    <Search @SearchBtn="SearchBtnFn" />
    <Table
      :table-data="tableData"
      :btn-text="'新增商品类型'"
      :pagecount="pagecount"
      @TopBtn="TopBtnFn"
      @CurrentChange="CurrentChangeFn"
      @SizeChange="SizeChangeFn"
      @OneBtn="OneBtnFn"
    />
    <el-dialog title="添加货品类型" :visible="goodsTypeDia" @close="CloseFn" width="30%" >
      <el-divider/>
      <el-form :model="GoodsType" :rules="rules" ref="Form">
        <el-form-item label="货品类型编码" prop="code">
          <el-input v-model="GoodsType.code" :placeholder="core" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="货品类型名称" prop="name">
          <el-input v-model="GoodsType.name" placeholder="请输入"></el-input>
        </el-form-item>
        <div class="BtnBox">
        <el-button type="warning" @click="CloseFn">取消</el-button>
        <el-button type="warning" @click="Submit">确定</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { AllGoodsType, NewCode, AddGoodsType, ModifyGoodsType } from '@/api'
export default {
  data() {
    return {
      GoodsType: {
        code: '',
        name: ''
      },
      rules: {
        code: [
          { required: true, message: '请输入货品类型名称' }
        ],
        name: [
          { required: true, message: '请输入货品类型名称', trigger: 'blur' }
        ]
      },
      core: '',
      // 弹窗
      goodsTypeDia: false,
      tableData: [],
      CKtype: {},
      pageS: {
        size: 10,
        current: 1,
        descs: 'createTime'
      },
      pagecount: {}
    }
  },
  created() {
    this.AllGoodsTypeFn()
    this.NewCodeFn()
  },
  methods: {
    // 渲染数据
    async AllGoodsTypeFn(Form) {
      const res = await AllGoodsType(this.pageS)
      this.pagecount = res.data.data
      res.data.data.records.forEach((item) => {
        const obj = {
          code: item.code,
          name: item.name,
          type: item.updateTime,
          id: item.id
        }
        this.tableData.push(obj)
      })
    },
    // 获取新编号
    async NewCodeFn() {
      const res = await NewCode('HPLX')
      this.core = res.data.data
      this.GoodsType.code = this.core
    },
    // 搜索
    SearchBtnFn(Form) {
      console.log(Form)
      this.pageS.like_code = Form.innerCooder
      this.pageS.like_name = Form.name
      if (Form.state !== 2 && Form.state !== '') {
        this.pageS.status = Form.state
      }
      this.AllGoodsTypeFn()
      this.tableData = []
    },
    // 新建按钮
    TopBtnFn(row) {
      console.log(row)
      this.goodsTypeDia = true
    },
    async Submit() {
      let res = ''
      try {
        if (this.GoodsType.id) {
          res = await ModifyGoodsType(this.GoodsType)
          this.AllGoodsTypeFn()
        } else {
          res = await AddGoodsType(this.GoodsType)
          this.AllGoodsTypeFn()
        }
        if (res.data.isSuccess) {
          this.$message({
            message: res.data.msg,
            type: 'success'
          })
          this.goodsTypeDia = false
        } else {
          this.$message({
            message: res.data.msg,
            type: 'warning'
          })
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 编辑按钮
    OneBtnFn(row) {
      console.log(row)
      this.GoodsType.name = row.name
      this.GoodsType.id = 1
      this.goodsTypeDia = true
    },
    CloseFn() {
      this.goodsTypeDia = false
      console.log(this.$refs.Form)
      this.$refs.Form.resetFields()
    },
    // 页数跳转
    CurrentChangeFn(val) {
      this.pageS.current = val
      this.AllGoodsTypeFn()
      this.tableData = []
    },
    SizeChangeFn(val) {
      this.pageS.size = val
      this.AllGoodsTypeFn()
      this.tableData = []
    }
  }
}
</script>

<style lang="scss" scoped>
.BtnBox{
margin-left:150px;

}
</style>
